
import { NavBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import type { PopconfirmProps } from 'antd';
import { Button, message, Popconfirm } from 'antd';
function Index() {
  const nav = useNavigate()
  const confirm: PopconfirmProps['onConfirm'] = (e) => {
  console.log(e);
  message.success('退出登录');
  nav('/login')
};

const cancel: PopconfirmProps['onCancel'] = (e) => {
  console.log(e);
  message.error('取消');
};
  const handleBack = () => {
    nav(-1) // 返回上一个页面
  }

  return (
    <div style={{ height: '100vh', backgroundColor: '#f5f5f5'}}>
      
      <div style={{backgroundColor: '#fff'}}>
       <NavBar onBack={handleBack} >系统设置</NavBar>
       <p style={{marginLeft:'5vw',fontSize:'20px'}}>头像<span><img src="" alt="" /></span></p>
      </div>
      <div style={{backgroundColor: '#fff'}}>
        <p style={{marginLeft:'5vw',fontSize:'20px'}}>昵称</p>
        <p style={{marginLeft:'5vw',fontSize:'20px'}}>账号设置</p>
        <p style={{marginLeft:'5vw',fontSize:'20px'}}>隐私</p>
        <p style={{marginLeft:'5vw',fontSize:'20px'}}>当前版本</p>
      </div>
      <div style={{backgroundColor: '#fff'}}>
       <Popconfirm
    title="退出登录"
    description="你确定退出登录吗"
    onConfirm={confirm}
    onCancel={cancel}
    okText="是的"
    cancelText="取消"
  >
    <Button style={{width:'100vw',textAlign:'center',color:'red'}}>退出登录</Button>
  </Popconfirm>
      </div>
    </div>
  )
}

export default Index
